<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Awesome UI</title>

    <link href="./css/awesome.css" rel="stylesheet"/>
    <!--<link href="./css/theme.css" rel="stylesheet"/>-->
    <link href="./css/font-awesome.min.css" rel="stylesheet"/>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="./js/html5shiv.min.js"></script>
    <script src="./js/respond.min.js"></script>
    <![endif]-->
    <style>
        .charts-menu li ul {
            clear: both;
            display: none;
            width: 250px;
            height: auto;
        }
        .charts-menu li a.menu-open + ul {
            display: block;
        }
        /*.charts-menu > li > ul > li > ul{*/
            /*clear: both;*/
            /*display: none;*/
            /*width: 250px;*/
            /*height: auto;*/
        /*}*/
        /*.charts-menu li >ul > li >a.menu-open + ul {*/
            /*display: block;*/
        /*}*/
        .nav {
            margin-bottom: 0;
            padding-left: 0;
            list-style: none;
        }

        /*===============================================
  Tags Manager
================================================= */
        .tag-container {
            margin-top: 10px;
        }
        .tm-tag {
            margin: 0px 8px 5px 0px;
            padding: 4px 8px;
            color: #FFF;
            font-size: 13px;
            font-weight: 600;
            border: 0;
            /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
            -webkit-border-radius: 3px;
            border-radius: 3px;
            box-shadow: none;
            background: #AAA;
            display: inline-block;
        }
        .tm-tag .tm-tag-remove {
            color: #FFF;
            opacity: 0.6;
            font-size: 13px;
            font-weight: 400;
            padding: 0 3px;
        }
        .tm-tag .tm-tag-remove:hover {
            color: #FFF;
            opacity: 1;
        }
        .tm-tag.tm-tag-primary {
            color: #FFF;
            background-color: #57aae1;
        }
        .tm-tag.tm-tag-info {
            color: #FFF;
            background-color: #5dbde0;
        }
        .tm-tag.tm-tag-success {
            color: #FFF;
            background-color: #8cd481;
        }
        .tm-tag.tm-tag-warning {
            color: #FFF;
            background-color: #f8c969;
        }
        .tm-tag.tm-tag-danger {
            color: #FFF;
            background-color: #e57563;
        }
        .tm-tag.tm-tag-alert {
            color: #FFF;
            background-color: #b09ae4;
        }
        .tm-tag.tm-tag-system {
            color: #FFF;
            background-color: #50ccad;
        }

        /* ==================================================
    Bootstrap Dual Listbox
 ==================================================== */
        .bootstrap-duallistbox-container .buttons {
            width: 100%;
            margin-bottom: -1px;
        }
        .bootstrap-duallistbox-container label {
            display: block;
        }
        form.hide-list-label .bootstrap-duallistbox-container label {
            display: none !important;
        }
        .bootstrap-duallistbox-container .info {
            display: inline-block;
            margin-bottom: 5px;
            font-size: 11px;
        }
        .bootstrap-duallistbox-container .clear1,
        .bootstrap-duallistbox-container .clear2 {
            display: none;
            position: relative;
            top: 2px;
            font-size: 11px;
        }
        .bootstrap-duallistbox-container .box1.filtered .clear1,
        .bootstrap-duallistbox-container .box2.filtered .clear2 {
            display: inline-block;
        }
        .bootstrap-duallistbox-container .move,
        .bootstrap-duallistbox-container .remove {
            width: 50%;
            padding: 6px 12px;
        }
        .bootstrap-duallistbox-container .btn-group .btn {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        .bootstrap-duallistbox-container select {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        .bootstrap-duallistbox-container .moveall,
        .bootstrap-duallistbox-container .removeall {
            width: 50%;
            padding: 6px 12px;
        }
        .bootstrap-duallistbox-container.bs2compatible .btn-group > .btn + .btn {
            margin-left: 0;
        }
        .bootstrap-duallistbox-container select {
            width: 100%;
            height: 300px;
            padding: 4px 5px;
        }
        .bootstrap-duallistbox-container.moveonselect select option {
            cursor: pointer;
        }
        .bootstrap-duallistbox-container .filter {
            display: inline-block;
            width: 100%;
            margin: 0 0 -1px 0;
        }
        .bootstrap-duallistbox-container .filter.placeholder {
            color: #aaa;
        }
        .bootstrap-duallistbox-container.moveonselect .move,
        .bootstrap-duallistbox-container.moveonselect .remove {
            display: none;
        }
        .bootstrap-duallistbox-container.moveonselect .moveall,
        .bootstrap-duallistbox-container.moveonselect .removeall {
            width: 100%;
            margin: 0 !important;
        }


    </style>
</head>
<body>
<!-- Begin: Content -->
<div class="container">

    <h1>Panel</h1>

    <div class="row">
        <div class="col-md-6">
            <div class="as-panel panel-success panel-border top">
                <div class="as-panel-header">
                    <span class="as-panel-title">panel title</span>
                </div>
                <div class="as-panel-body">

                    <div class="badge-btn">
                        <button class="btn btn-default">
                            <span>Info</span>
                            <span class="badge badge-danger">9</span>
                        </button>
                    </div>
                    <div class="as-form-group">
                        <label class="as-control-label col-md-4">测试：</label>
                        <div class="col-md-8">
                            <!-- <span class="as-append-icon right">
                                <i class="fa fa-check"></i>
                            </span> -->
                            <input type="text" class="as-form-control as-validatebox">
                            <!-- <b class="tooltip tip-right"> <em>不能为空！请输入有效邮箱</em> </b>  -->
                        </div>
                    </div>
                
                </div>
                <div class="as-panel-footer">
                    <div class="as-pagination" data-options="total:100"></div>
                </div>
            </div>

            <!--<div class="as-form-group">-->
                <!--<div class="progress mt10">-->
                    <!--<div class="progress-bar progress-bar-primary progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div>-->
                  <!--</div>-->
                <!--<a href="#" class="btn btn-dark mb10 mr5 notification" data-note-style="dark">Dark</a>-->
            <!--</div>-->
            <div class="as-panel">
                <div class="as-panel-header"></div>
                <div class="as-panel-body">
                    <ul class="charts-menu nav">
                        <li>
                            <a href="#" class="accordion-toggle">123</a>
                            <ul class="nav sub-nav pl15">
                                <li>234</li>
                                <li>567</li>
                                <li>789</li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="accordion-toggle">234</a>
                            <ul class="nav sub-nav pl15">
                                <li>345</li>
                                <li>
                                    <a href="#" class="accordion-toggle">456</a>
                                    <ul class="nav sub-nav pl15">
                                        <li>sjkh</li>
                                        <li>sjhfk</li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#" class="accordion-toggle">789</a>
                                    <ul class="nav sub-nav pl15">
                                        <li>sjkh</li>
                                        <li>sjhfk</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="accordion-toggle">456</a>
                            <ul class="nav sub-nav pl15">
                                <li>sdgf</li>
                                <li>sadfsa</li>
                                <li>asdfsa</li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="accordion-toggle">jgkj</a>
                            <ul class="nav sub-nav pl15">
                                <li>werw</li>
                                <li>qwerw</li>
                                <li>rtuyrt</li>
                            </ul>
                        </li>
                    </ul>
                    <div class="as-form-group mt30">
                        <button id="pnotify" class="btn btn-alert">点击</button>
                    </div>

                </div>
            </div>
            <div class="as-panel">
                <div class="as-panel-header">
                </div>
                <div class="as-panel-body">
                    <div class="bootstrap-duallistbox-container row moveonselect">
                        <div class="col-md-6">
                            <span class="info-container">
                                <span class="info">Showing all 12</span>
                            </span>
                            <input class="filter as-form-control" type="text" placeholder="Filter">
                            <div class="btn-group buttons">
                                <button type="button" class="btn moveall btn-default" title="Move all">
                                    >>
                                </button>
                            </div>
                            <select class="as-form-control" multiple="multiple" size="10">
                                <option value="option1">Option 1</option>
                                <option value="option2">Option 2</option>
                                <option value="option3">Option 3</option>
                                <option value="option4">Option 4</option>
                                <option value="option5">Option 5</option>
                                <option value="option6">Option 6</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <span class="info-container">
                                <span class="info">Showing all 12</span>
                            </span>
                            <input class="filter as-form-control" type="text" placeholder="Filter">
                            <div class="btn-group buttons">
                                <button type="button" class="btn moveall btn-default" title="Move all">
                                    <<
                                </button>
                            </div>
                            <select class="as-form-control" multiple="multiple" size="10">
                                <option value="option1">Option 1</option>
                                <option value="option2">Option 2</option>
                                <option value="option3">Option 3</option>
                                <option value="option4">Option 4</option>
                                <option value="option5">Option 5</option>
                                <option value="option6">Option 6</option>
                            </select>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="as-panel">
                <div class="as-panel-header">
                    <span class="as-panel-title">Basic Input</span>
                </div>
                <div class="as-panel-body">
                    <div class="as-form-group">
                        <label class="col-md-3 as-control-label">Input</label>
                        <div class="col-md-9">
                            <input type="text" class="as-form-control">
                        </div>
                    </div>
                    <div class="as-form-group">
                        <label class="col-md-3 as-control-label">Select List</label>
                        <div class="col-md-9">
                            <select class="as-form-control">
                                <option value="1">Select1</option>
                                <option value="2">Select2</option>
                            </select>
                        </div>
                    </div>
                    <div class="as-form-group">
                        <label class="col-md-3 as-control-label">Disabled</label>
                        <div class="col-md-9">
                            <input type="text" class="as-form-control" disabled>
                        </div>
                    </div>
                    <div class="as-form-group">
                        <label class="col-md-3 as-control-label">Text Area</label>
                        <div class="col-md-9">
                            <textarea rows="3" class="as-form-control"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="as-panel">
                <div class="as-panel-header">
                    <span class="as-panel-title">Basic Input</span>
                </div>
                <div class="as-panel-body">
                    <div class="as-form-group">
                        <label class="col-md-3 as-control-label">Disabled</label>
                        <div class="col-md-9">
                            <input type="text" id="tagmanager" class="as-form-control">
                        </div>
                    </div>
                </div>
            </div>
            <div class="as-panel">
                <div class="as-panel-header"></div>
                <div class="as-panel-body">
                    <div class="as-form-group" id="listbox">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End: Content -->
<script src="../js/jquery-1.11.2.min.js"></script>
<!--<script src="./js/bootstrap.min.js"></script>-->
<script src="./js/awesome.js"></script>
<script src="../js/plugins/pnotify.js"></script>
<script src="../js/plugins/tagmanager.js"></script>
<script src="../js/plugins/listbox.js"></script>
<script type="text/javascript">

    $('.charts-menu li a.accordion-toggle').on('click', function(e) {
        e.preventDefault();


        //关闭已经下拉的菜单
        if(!$(this).parents('ul.sub-nav').length){

            $('a.accordion-toggle.menu-open').next('ul').slideUp('fast', 'swing', function(){
                $(this).attr('style','').prev().removeClass('menu-open');
            });
        }
        //如果如果点击的菜单为二级下拉菜(还有三级)，则关闭非点击的二级菜单（非顶级菜单）
        else{
            var activeMenu = $(this).next('ul.sub-nav');
            var siblingMenu = $(this).parent().siblings('li').children('a.accordion-toggle.menu-open').next('ul.sub-nav');

            activeMenu.slideUp('fast', 'swing', function(){
                $(this).attr('style', '').prev().removeClass('menu-open');
            });
            siblingMenu.slideUp('fast', 'swing', function(){
                $(this).attr('style','').prev().removeClass('menu-open');
            });
        }

        //打开点击的菜单
        if(!$(this).hasClass('menu-open')) {
            $(this).next('ul').slideToggle('fast', 'swing', function() {
                $(this).attr('style', '').prev().toggleClass('menu-open');
            });
        }
    });

    $("#pnotify").pnotify({
        type: 'warning',
        title:'Bootstrap Themed',
        text: 'Look at my beautiful styling! ^_^!Look at my beautiful styling! ^_^!Look at my beautiful styling! ^_^!Look at my beautiful styling! ^_^!Look at my beautiful styling! ^_^!'

    });

    $("#tagmanager").tagmanager({
        color: "warning"
    });

    $("#listbox").listbox({

    });
    
//  jQuery(document).ready(function() {
//
//    // A "stack" controls the direction and position
//    // of a notification. Here we create an array w
//    // with several custom stacks that we use later
//    var Stacks = {
//      stack_top_right: {
//        "dir1": "down",
//        "dir2": "left",
//        "push": "top",
//        "spacing1": 10,
//        "spacing2": 10
//      },
//      stack_top_left: {
//        "dir1": "down",
//        "dir2": "right",
//        "push": "top",
//        "spacing1": 10,
//        "spacing2": 10
//      },
//      stack_bottom_left: {
//        "dir1": "right",
//        "dir2": "up",
//        "push": "top",
//        "spacing1": 10,
//        "spacing2": 10
//      },
//      stack_bottom_right: {
//        "dir1": "left",
//        "dir2": "up",
//        "push": "top",
//        "spacing1": 10,
//        "spacing2": 10
//      },
//      stack_bar_top: {
//        "dir1": "down",
//        "dir2": "right",
//        "push": "top",
//        "spacing1": 0,
//        "spacing2": 0
//      },
//      stack_bar_bottom: {
//        "dir1": "up",
//        "dir2": "right",
//        "spacing1": 0,
//        "spacing2": 0
//      },
//      stack_context: {
//        "dir1": "down",
//        "dir2": "left",
//        "context": $("#stack-context")
//      }
//    }
//
//    // PNotify Plugin Event Init
//    $('.notification').on('click', function(e) {
//      var noteStyle = $(this).data('note-style');
//      var noteShadow = $(this).data('note-shadow');
//      var noteOpacity = $(this).data('note-opacity');
//      var noteStack = $(this).data('note-stack');
//      var width = "290px";
//
//      // If notification stack or opacity is not defined set a default
//      var noteStack = noteStack ? noteStack : "stack_top_right";
//      var noteOpacity = noteOpacity ? noteOpacity : "1";
//
//      // We modify the width option if the selected stack is a fullwidth style
//      function findWidth() {
//        if (noteStack == "stack_bar_top") {
//          return "100%";
//        }
//        if (noteStack == "stack_bar_bottom") {
//          return "70%";
//        } else {
//          return "290px";
//        }
//      }
//
//      // Create new Notification
//      new PNotify({
//        title: 'Bootstrap Themed',
//        text: 'Look at my beautiful styling! ^_^Look at my beautiful styling! ^_^Look at my beautiful styling! ^_^Look at my beautiful styling! ^_^Look at my beautiful styling! ^_^',
//        shadow: noteShadow,
//        opacity: noteOpacity,
//        addclass: noteStack,
//        type: noteStyle,
//        stack: Stacks[noteStack],
//        width: findWidth(),
//        delay: 140000
//      });
//
//    });
//
//
//  });
  
</script>
</body>
</html>